import React,{useState,useEffect} from "react"
import { Button, Card , Form ,Table , Input ,Modal, message} from 'antd'
import { DeleteOutlined,ExclamationCircleOutlined, PlusOutlined ,SearchOutlined } from '@ant-design/icons'
import { getToken,addKeyFn } from '../../utils/utils'
import axios from 'axios'
function TeacherList(){
    const [tableData,setTableData] = useState([])
    useEffect(()=>{
        axios.get('/api/queryteacher',{
            headers:{
                'Authorization':getToken()
            }
        }).then(res=>{
            const result = JSON.stringify(res.data.results)
            setTableData(addKeyFn(JSON.parse(result)))
            
        }).catch(err=>{
            console.log(err)
        })

    },[])
   
    const columns = [
        {
            title:'序号',
            key:'key',
            dataIndex:'key',
            render:(key)=>{
                return <b>{key}</b>
            }
        },{
            title:'教师姓名',
            key:'userName',
            dataIndex:'userName',
            render:(userName)=>{
                return <b>{userName}</b>
            }
        },
        {
            title:'头像',
            key:'teacher_pic',
            dataIndex:'teacher_pic',
            render:(teacher_pic)=>{
                return (
                    <img style={{width:"50px",height:'50px'}} src={teacher_pic}/>
                )
            }
        },{
            title:'教师邮箱',
            key:'email',
            dataIndex:'email',
            render:(email)=>{
                return <b>{email}</b>
            }
        },
        {
            title:'教师座右铭',
            key:'teacherMotto',
            dataIndex:'teacherMotto',
            render:(teacherMotto)=>{
                return <b>{teacherMotto}</b>
            }
        }
    ]
    
    return (
        <div>
            <Card title="教师列表">
                <Table 
                    dataSource={tableData}
                    columns={columns}
                    pagination={{pageSize:3}} 
                    rowKey={record=>record.userId}
                    >
                </Table>
            </Card>
        </div>
    )
}
export default TeacherList